<template>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="/">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button> 
    <span class="testA" >啊哈哈哈哈哈</span>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" @click="jump('comp-home')">Home </a>
        </li>
        <li class="nav-item" v-if="user && user.id">
          <a class="nav-link" @click="loginOut">注销</a>
        </li>
        <li class="nav-item" v-if="!user || !user.id">
          <a class="nav-link" @click="jump('comp-login')">登录</a>
        </li>  
        <li class="nav-item">
          <a class="nav-link" @click="jump('comp-blog-add')">发表</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</template>

<script>
import {get} from '../utils/utils.js'

export default { 
  data (){
    return {
    }
  },
  props:['user'],
  methods:{
    jump (compName, data){
      this.$root.chgComp(compName, data)
    }, 
    replaceJump(compName, data){
      this.$root.replaceComp(compName, data)
    },
    async loginOut(){
      await get('/users/loginOut')
      // this.$parent.$forceUpdate()
      this.jump('comp-main')
    }
  },
  mounted:async function(){
    // const user =await get('/users/info')
    // this.user =user
  }

}
</script>
<style type="text/css" scoped>
  .testA{
    color: red;
  }
</style>

